<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="father">
    <div class="search">
      <div class="item">
        <div class="item1">
          <img src="@/assets/tenlogo.jpg" width="100%" height="100%" opacity="0">
        </div>
      <div class="item2">
        <router-link to="/r_search" width="100%" height="100%">
                <el-input
                  :placeholder= "placeholders"
                  prefix-icon="el-icon-search"
                  v-model="input">
                </el-input>
              </router-link>
      </div>
      <div class="item3">
              <router-link to="/messages">
                <img src="@/assets/信息-01.png" alt="信息" width="100%" height="100%" opacity="0.5">
              </router-link>
      </div>
      </div>
    </div>
    <div class="navbar">
      <router-link to="/discovery" class="router-link" tag="div">特价商品</router-link>
      <router-link to="/huaweidongtai" class="router-link" tag="div">华为动态</router-link>
    </div>
    <div class="body">
      <div class="sj">
      <router-link to="goods1" tag="span">
        <div class="demo">
        <img
              src="@/assets/discovery/1.png"
              alt=""
              width="100%"
        />
        <div class="product-card">
          <p><b>华为 <br>智能眼镜2<br>1699</b></p>
        </div>
      </div>
      </router-link>
      <router-link to="goods2" tag="span">
        <div class="demo">
        <img
              src="@/assets/discovery/2.png"
              alt=""
              width="100%"
        />
        <div class="product-card">
          <p><b>HUAWEI FreeBuds Pro 3<br>1499</b></p>
        </div>
      </div>
      </router-link>
      <router-link to="goods3" tag="span">
        <div class="demo">
        <img
              src="@/assets/discovery/3.png"
              alt=""
              width="100%"
        />
        <div class="product-card">
          <p><b>HUAWEI MateBook 14<br>5199</b></p>
        </div>
      </div>
      </router-link>
    </div>
    <div class="sj">
      <router-link to="goods4" tag="span">
        <div class="demo">
        <img
              src="@/assets/discovery/4.png"
              alt=""
              width="100%"
        />
        <div class="product-card">
          <p><b>HUAWEI MatePad Pro 11<br>4199</b></p>
        </div>
      </div>
      </router-link>
      <router-link to="goods5" tag="span">
        <div class="demo">
        <img
              src="@/assets/discovery/5.png"
              alt=""
              width="100%"
        />
        <div class="product-card">
          <p><b>华为<br>畅想70<br>1149</b></p>
        </div>
      </div>
      </router-link>
      <router-link to="goods6" tag="span">
        <div class="demo">
        <img
              src="@/assets/discovery/6.png"
              alt=""
              width="100%"
        />
        <div class="product-card">
          <p><b>HUAWEI<br>Mate X3<br>12999</b></p>
        </div>
      </div>
      </router-link>
    </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      products: [],
      news: [],
      count: 0,
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版', '微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版']
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
  }
}
</script>

<style scoped>
.father{
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.item{
  display: flex;
  height: 100%;
  background-color:#fff;
}
.item1{
  width: 30%;
  background: #fff;
}
.item2{
  width: 60%;
  padding-top: 10px;
}
.item3{
  padding: 10px;
  width: 10%;
  margin-top: 5px;
}
.product-card {
  border: 1px solid #ffffff;
  padding: 10px;
  margin: 10px;
  text-align: center;
  font-size: 4px;
}
.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #d6d0d0;
  color: white;
  padding: 10px;
}

.router-link {
  text-decoration: none;
  color: rgb(162, 78, 78);
}
.sj {
  width: 450px;
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.body{
  width: 450px;
  height: 560px;
  overflow: hidden;
  background-color: #fff;
  border-bottom: solid 1px gray;
}
</style>
